<template>
    <div class="pandect">
        <div class="pandect-top">
            <span class="timerTitle">
                时间
            </span>
            <div class="timerShaft">
                <!-- <div class="start" @mousedown.prevent="onMousedown($event)" @mouseup.prevent="onMouseup($event)">
                    <div class="timer timerStart">
                        <span>
                            2018-01-01
                        </span>
                    </div>
                </div>
                <div class="end" @mousedown.prevent="onMousedown($event)" @mouseup.prevent="onMouseup($event)">
                    <div class="timer timerEnd">
                        <span>
                            {{today}}
                        </span>
                    </div>
                </div> -->
                <el-slider
                    v-model="dates"
                    range
                    :max="max"
                    :min="min"
                    class="slider"
                    placement="bottom"
                    :format-tooltip="formatTooltip">

                </el-slider>
            </div>
            <el-button type="primary ent-button fr" class="timerStatus"><i class="iconfont icon-search ent-search"></i>确认</el-button>
            <!--  @click="goto" -->
        </div>
        <panContent></panContent>
    </div>
</template>

<script>
import { jSelect, jDatePicker, jPageMsg } from '../../components'
// import { statAnaly as api } from '../../api'
import panContent from './panContent'
export default {
  name: 'pandect',
  components: { jSelect, jDatePicker, jPageMsg, panContent },
  data() {
    return {
      today: this.date(),
      dates: [195457152395, 1296770094680],
      max: new Date().getTime(),
      min: new Date(1970).getTime()
    }
  },
  mounted() {

  },
  methods: {
    formatTooltip(val) {
      return this.date(val)
    },
    date(time) {
      let date, y, m, d
      if (time) {
        date = new Date(time)
      } else {
        date = new Date()
      }
      y = date.getFullYear()
      m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + m + '-' + d
    },
    onMousedown(e) {
      var event = e || window.event
      var target = event.target
      var startx = event.clientX
      var width = target.clientWidth
      var wid = startx - event.target.offsetLeft
      var timerShaft = document.querySelector('.timerShaft')
      var ww = timerShaft.clientWidth
      document.onmousemove = function(ev) {
        var evt = ev || window.event
        if (evt.clientX < 0 || evt.clientX >= ww) {
          return false
        };
        var endx = evt.clientX - wid
        if (target.parentNode.className === 'start' || target.parentNode.className === 'end') {
          target.parentNode.style.width = width + endx + 'px'
        }
      }
    },
    onMouseup() {
      document.onmousemove = null
    }
  }
}
</script>

<style lang="scss" scoped>
.pandect {
    width: 100%;
    height: 100%;
    .pandect-top,
    .pandect-content,
    .enterprise {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .chart-block{
        background: #fff;
        margin:10px 5px;
        padding: 10px;
    }
    .content-center {
        flex: 1;
    }
    .contentEdge {
        width: 394px;
        height: 100%;
    }
    .slider{
        width: 100%;
    }
    .enterprise {
        p {
            margin: 10px;
            padding: 10px;
            width: 50%;
            height: 100%;
            span {
                display: block;
            }
        }
    }
    .pandect-top {
        height: 40px;
        line-height: 40px;
        margin: 5px 0;
        align-items: center;
        .timerTitle {
            width: 60px;
            text-align: center;
        }
        .timerShaft {
            flex: 1;
            // height: 20px;
            // background: #f2f2f2;
            margin:0 10px;
            padding:0 10px;
            z-index: 0;
            position: relative;
        }
        .timer {
            position: absolute;
            right: 0;
            width: 20px;
            height: 100%;
            background: #bcbcbc;
            cursor:e-resize;
            span {
                position: absolute;
                left: -35px;
                top: 18px;
                width: 100px;
                text-align: center;
            }
        }
        .start{
            width: 250px;
            z-index: 2;
            height: 100%;
            background: #fff;
            position: absolute;
            left: 0;
            top: 0;
        }
        .end {
            width: 800px;
            height: 100%;
            z-index: 1;
            background: #e4e4e4;
            position: absolute;
            left: 0;
            top: 0;
        }

    }
}
</style>


// WEBPACK FOOTER //
// src/view/pandect/pandect.vue